<template>
	<div id="search-header" :class="themeClass">
		<slot></slot>
		<div class="input-group search-input" :style="{width: nomalizeInputSize}">
			<i class="iconfont icon-search"></i>
			<input class="search-input" placeholder="输入关键字" :value="keyword" @input="updateValue($event)">
		</div>
		<span class="search-it" @click="search()">搜索</span>
		<!-- <div class="pull-right dropdown-box">
			<span class="caret"></span>
			<div class="dropdown language-choice" style="left: -100px;">
				<p @click="setLanguage('chinese');" class="clearfix">
					<span class="svg-English pull-left"></span>
					<span class="pull-left">English</span>
				</p>
				<p @click="setLanguage('english');" class="clearfix">
					<span class="pull-left svg-China"></span> 
					<span class="pull-left">中文</span>
				</p>
			</div>	
		</div> -->
	</div>
</template>

<script>
export default {
	props: [
		'color',
		'inputWidth',
		'noRedirect',
		'value'
	],
	name: 'search-header',
	data () {
		return {
			keyword: ''
		}
	},
	computed: {
		themeClass () {
			return 'search-'+this.color;
		},
		nomalizeInputSize () {
			return this.inputWidth ? this.inputWidth : '75%';
		}
	},
	mounted () {
		if (this.value)
			this.keyword = this.value;
		var el = this.$el;
		var clientHeight = this.$el.clientHeight;
		window.addEventListener('scroll', function (e) {
			var visibleTop = window.scrollY;
			
			if (visibleTop > clientHeight && el.style.position != 'fixed') {
				el.style.position = 'fixed';
			}
			if (visibleTop < clientHeight && el.style.position != 'static'){
				el.style.position = 'static';
			}
		});
	},
	methods: {
		updateValue (event) {
			this.$emit('input', event.target.value);
			this.keyword = event.target.value;
		},
		search (value) {
			if (this.noRedirect) {
				this.$emit('search', this.keyword);
			} else {
				this.$router.push({
					path: '/goods/search',
					query: {
						'keyword': this.keyword
					}
				});	
			}
		},
		setLanguage (language) {
			this.$store.commit('setLanguage', language);
		}
	}
}
</script>

<style scoped>
	#search-header {
		top: 0px;
		left: 0px;
		height: 50px;
		line-height: 50px;
		z-index: 100;
		width: 100%;
		padding-left: 10px;
		padding-right: 10px; 
		box-sizing:border-box;
	}

	.search-red {
		background-color: #b21014;
	}

	.search-white {
		background-color: #fff;
		border-bottom: 1px solid #c7c7c7;
	}

	.input-group {
		line-height: normal;
	    display: inline-table;
	    border-collapse: separate;
	    position: relative;
    	font-size: 14px;
    	height: 50px;
    	line-height: 50px;
    	box-sizing:border-box;
	}

	.input-group input {
		width: 100%;
		padding-left: 35px;
		height: 34px;
		border-radius: 20px;
		border: none;
		outline: none;
	}
	.input-group .icon-search {
		position: absolute;
		left: 15px;
		line-height: 50px;
	}

	.search-it {
		float: right;
		text-align: center;
	}
	
	.search-red .search-it {
		color: #fff;
	}

	.search-white .search-it {
		color: #c7c7c7;
	}

	.search-white input {
		background-color: #eaeaea;
	}

	.language-choice span.pull-left{
		line-height: 2em;
		margin-right: 5px;
	}
</style>